<template>
  <div class="py-6">
    <div v-if="!loginCustomer" class="text-center" style="margin-top: 200px;">
      <v-btn color="success" style="margin: auto" @click="openLoginPage">请登录</v-btn>
    </div>
    <div v-else class="my-2 mx-1">
      <h2>订单页面</h2>
      <v-card elevation="1" class="my-2" v-for="order in orderList" :key="order.id" @click="openOrderDetails(order)">
        <v-card-title class="subtitle-2">
          {{order.businessName}}
          <v-spacer/>
          <div v-if="order.status==0"><v-chip label outlined color="primary" small>未支付</v-chip> </div>
          <div v-else-if="order.status==1"><v-chip label outlined color="success" small>已支付</v-chip> </div>
          <div v-else-if="order.status==2"><v-chip label outlined color="error" small>退订中</v-chip> </div>
          <div v-else-if="order.status==3"><v-chip label outlined color="error" small>已退订</v-chip> </div>
        </v-card-title>
        <v-card-text>
          <v-row>
            <v-col cols="4" v-for="goods in order.orderGoodsList" :key="goods.goodsId" class="text-center">
              <div class="text-center"><v-img style="display: inline-block" :src="goods.image" width="60" height="60"></v-img></div>
              <div>{{goods.goodsName}}</div>
            </v-col>
          </v-row>
        </v-card-text>
      </v-card>
      <br/>
      <v-btn block @click="getOrderListByCustomerId">点击加载更多</v-btn>
    </div>
  </div>
</template>

<script>
import {selectOrderVOByCustomerId} from "@/http/api/order";

export default {
  name: "Index",
  data:()=>({
    orderList:[],
    pageNum:1,
    pageSize:10,
    nextPage:0,
  }),
  computed:{
    loginCustomer(){
      return this.$store.state.customer
    }
  },
  created() {
    this.init();
  },
  methods:{
    init(){
      if (!this.loginCustomer.id){
        return
      }
      this.getOrderListByCustomerId()
    },
    /**
     * 获取订单列表
     * @param isAdd
     */
    getOrderListByCustomerId(isAdd){
      if (isAdd){
        if (this.nextPage === 0){
          this.$breadstick.notify("没有更多订单了,快去购买...")
          return
        }
        this.pageNum++;
      }
      selectOrderVOByCustomerId(this.loginCustomer.id,this.pageNum,this.pageSize).then(res=>{
        this.orderList.push(...res.data.list)
        this.nextPage = res.data.nextPage
      })
    },
    /**
     * 打开登录页面
     */
    openLoginPage(){
      this.$router.push({
        path:'/login',
        query:{
          fromPath:'/order'
        }
      })
    },
    /**
     * 打开订单详情
     * @param order 订单信息
     */
    openOrderDetails(order){
      this.$router.push({
        path:'/order/details',
        query:{
          orderId:order.id
        }
      })
    }
  }
}
</script>

<style scoped>

</style>